<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>UNSW Traffic Map</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		{{include 'web2py_ajax.html'}}
		
		<link rel=stylesheet href="{{=URL('static','css/style2.css')}}" />
		<link rel="shortcut icon" href="{{=URL('static','images/favicon.ico')}}" />
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css" />
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.14&libraries=visualization&key={{=apiKey}}&sensor=false"></script>
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script type="text/javascript" src="{{=URL('static','js/markerwithlabel.js')}}"></script>
		<script type="text/javascript">
			var map;
			var infowindow;
			var infoContent
			var barchart;
			var piechart;
			var mapsEngineLayer;
			{{for location in locations:}}
				var {{=location.replace(" ","")}}circle

				var thermalDataOptions = {
					strokeColor: '#0080FF',
					strokeOpacity: 0.8,
					strokeWeight: 2,
					fillColor: '#0080FF',
					fillOpacity: 0.35,
					map: map,
					center: new google.maps.LatLng(37.782, -122.447),
					radius: 1
				}
				var {{=location.replace(" ", "")}}circle = new google.maps.Circle(thermalDataOptions);

				var markerOptions = {
					position: new google.maps.LatLng(37.782, -122.447),
					map: map,
					labelContent: "loading",
					labelAnchor: new google.maps.Point(45, 0),
					labelClass: "labels",
					icon: "{{=URL('static','images/sensor.png')}}"
				}
				var {{=location.replace(" ", "")}}marker = new MarkerWithLabel(markerOptions);
			{{pass}}
			
			var heatmapData = [{location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},]

			var	heatmapLayer = new google.maps.visualization.HeatmapLayer({
				data: heatmapData,
				radius: 100,
			});

			function initialize() {
				var mapOptions = {
					center: new google.maps.LatLng(-33.916772, 151.233541),
					zoom: 19,
					mapTypeId: google.maps.MapTypeId.SATELLITE, //ROADMAP, HYBRID, TERRAIN, SATELLITE
					disableDefaultUI: true,
					mapTypeControl: true,
				};
				map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

				infowindow = new google.maps.InfoWindow({
					content: "loading",
				});

				mapsEngineLayer = new google.maps.visualization.MapsEngineLayer({
					layerId: '16075412419356476951-15008645713199253813',
					map: null,
					suppressInfoWindows: false
				});

				ajax('{{=URL('showHeatmap')}}',['dateInput', 'timeInput', 'locationInput'],'showHeatmap');
				updateOptions();
			}

			google.load("visualization", "1", {packages:["corechart"]});
			google.setOnLoadCallback(drawChart);

			function drawChart() {
				var data = google.visualization.arrayToDataTable([
					['Year', 'Sales', 'Expenses'],
					['2004',  1000,      400],
					['2005',  1170,      460],
					['2006',  660,       1120],
					['2007',  1030,      540]
				]);

				var options = {
					title: 'Company Performance',
					vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
				};

				barchart = new google.visualization.ColumnChart(document.getElementById('bar_chart_div'));
				barchart.draw(data, options);
				
				piechart = new google.visualization.ColumnChart(document.getElementById('pie_chart_div'));
				piechart.draw(data, options);
			}

			$(function() {

				var select = $( "#timeInput" );
				var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
					min: 1,
					max: {{=len(times)}},
					range: "min",
					value: select[ 0 ].selectedIndex + 1,
					slide: function( event, ui ) {
						select[ 0 ].selectedIndex = ui.value - 1;
						ajax('{{=URL('showHeatmap')}}',['dateInput', 'timeInput', 'locationInput'],'showHeatmap');
						updateOptions();
					}
				});
				$( "#timeInput" ).change(function() {
					slider.slider( "value", this.selectedIndex + 1 );
				});

			});

			function updateOptions() {
				var form = document.options;
				if (form.mapsEngineLayerControl.checked){
					mapsEngineLayer.setMap(map);
				} else {
					mapsEngineLayer.setMap(null);
				}

				if (form.mapsHeatmapLayerControl.checked){
					try {
						heatmapLayer.setMap(map);
					} catch (err) {}
				} else {
					try {
						heatmapLayer.setMap(null);
					} catch (err) {}
				}

				if (form.mapsCircleLayerControl.checked){
					var locEle = document.getElementById("locationInput");
					var locStr = locEle.options[locEle.selectedIndex].text;

					if (locStr === "All"){
						{{for location in locations:}}
								try {
									{{=location.replace(" ","")}}circle.setMap(map);
									{{=location.replace(" ","")}}marker.setMap(map);
								} catch (err){}
						{{pass}}
					} else {
						{{for location in locations:}}
							if ('{{=location}}' === locStr) {
								try {
									{{=location.replace(" ","")}}circle.setMap(map);
									{{=location.replace(" ","")}}marker.setMap(map);
								} catch (err){}
							} else {
								try {
									{{=location.replace(" ","")}}circle.setMap(null);
								} catch (err){}
							}
						{{pass}}
					}

					} else {

						{{for location in locations:}}
								try {
									{{=location.replace(" ","")}}circle.setMap(null);
								} catch (err){}
						{{pass}}
					}
			}

		</script>
		
	</head>
	
	<body onload="initialize()">
		<div id="map-canvas"></div>
		<div id="panelbackground">
			<div class="logo">
				<a href="http://www.unsw.edu.au/" target="_blank">
					<img src="http://www.mcqmc2012.unsw.edu.au/images/logounsw.png" width="300" />
				</a>
			</div>
			<div id="controlPanel">
				<select id="locationInput" name="locationInput" onchange="ajax('{{=URL('showHeatmap')}}',['dateInput', 'timeInput', 'locationInput'],'showHeatmap');updateOptions();">
					<option>All</option>
					{{for location in locations:}}
						<option>{{=location}}</option>
					{{pass}}
				</select>

				<select id="dateInput" name="dateInput" onchange="ajax('{{=URL('showHeatmap')}}',['dateInput', 'timeInput', 'locationInput'],'showHeatmap');updateOptions();">
					{{for date in dates:}}
						<option>{{=date}}</option>
					{{pass}}
				</select>

				<select id="timeInput" name="timeInput" onchange="ajax('{{=URL('showHeatmap')}}',['dateInput', 'timeInput', 'locationInput'],'showHeatmap');updateOptions();">
					{{for time in times:}}
						<option>{{=time}}</option>
					{{pass}}
				</select>

				<form name="options" action="javascript:updateOptions();">
					<table border="0">
						<tr>
							<td>
								<input type="checkbox" onclick="updateOptions();" name="mapsEngineLayerControl" />
							</td>
							<td>
								<b>UNSW POC Layout V2 Layer</b>
							</td>
						</tr>

						<tr>
							<td>
								<input type="checkbox" onclick="updateOptions();" name="mapsHeatmapLayerControl" />
							</td>
							<td>
								<b>Heatmap Layer</b>
							</td>
						</tr>

						<tr>
							<td>
								<input type="checkbox" onclick="updateOptions();" name="mapsCircleLayerControl" checked/>
							</td>
							<td>
								<b>Circles Layer</b>
							</td>
						</tr>
					</table>
				</form>

				<div id="showHeatmap"></div>
			</div>
			
			<div id="pie_chart_div" ></div>
			<div id="bar_chart_div" ></div>
			
			<div class="logo">
				<a href="http://www.ngis.com.au/" target="_blank">
					<img src="https://s3-ap-southeast-2.amazonaws.com/ngis/NGIS_Logo.png" height="50" />
				</a>
			</div>
		</div>

		<div id="legend">
			<table>
				<tr>
					<td><img src="{{=URL('static','images/greenlegend.png')}}"/></td><td>Traffic <= 50</td>
				</tr>
				<tr>
					<td><img src="{{=URL('static','images/yellowlegend.png')}}"/></td><td>Traffic > 50 and <=200</td>
				</tr>
				<tr>
					<td><img src="{{=URL('static','images/redlegend.png')}}"/></td><td>Traffic > 200</td>
				</tr>
			</table>
		</div>
	</body>
</html>